<template>
  <div class="login_wrap">
    <div class="login_head">
      <img src="../../assets/image/logo.0940ebb5.png" alt="" />
      <a href="#" @click="$router.push('/layout')">进入网站首页</a>
    </div>
    <div class="login_content">
      <div class="login_container">
        <div class="login_info">
          <ul class="nav">
            <li
              :class="loginFlag == true ? 'active' : ''"
              @click="loginFlag = true"
            >
              账户登录
            </li>
            <li
              :class="loginFlag == false ? 'active' : ''"
              @click="loginFlag = false"
            >
              扫码登录
            </li>
          </ul>
          <div class="login_form" v-if="loginFlag">
            <div class="useMessage">
              <a href="#" v-if="!loginType" @click="loginType = true">
                <i class="iconfont icon-aoteman"></i>使用账号密码登录</a
              >
              <a href="#" v-if="loginType" @click="loginType = false">
                <i class="iconfont icon-aoteman"></i>使用短信登录</a
              >
            </div>
            <div class="form" v-if="loginType">
              <div>
                <i class="iconfont icon-aoteman"></i>
                <input v-model="account" type="text" placeholder="输入账号" />
              </div>
              <div>
                <i class="iconfont icon-money"></i>
                <input v-model="password" type="text" placeholder="输入密码" />
              </div>
            </div>
            <div class="form" v-if="!loginType">
              <div>
                <i class="iconfont icon-aoteman"></i>
                <input placeholder="手机号" type="text" />
              </div>
              <div>
                <i class="iconfont icon-money"></i>
                <input type="text" class="veri" placeholder="验证码" />
                <button>发送验证码</button>
              </div>
            </div>
            <div class="deil">
              <input type="checkbox" v-model="deilFlag" name="" id="" />
              我已同意
              <div class="tips" v-if="!deilFlag">请勾选同意协议</div>
            </div>
            <div class="login_btn" @click="toLogin">登录</div>
            <div class="qq">
              <img
                src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
                alt=""
              />
            </div>
          </div>
          <div class="code" v-if="!loginFlag">
            <img src="../../assets/image/二维码.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="login_foot"></div>
  </div>
</template>
<script>
import { _loginApi } from '../../api/common'
export default {
  data () {
    return {
      account: '', //用户名
      password: '', //密码
      loginFlag: true, //登录方式的切换
      deilFlag: true, //协议提示显示
      loginType: true //true账号登录  false 手机号
    }
  },
  created () {},
  methods: {
    // 登录接口
    async toLogin () {
      var res = await _loginApi(this.account, this.password)
      console.log(res)
      // token 存储到localStorage
      localStorage.token = res.data.result.token
      // 把后台返回的用户信息和token存储到vuex
      this.$store.commit('setUser', res.data.result)
      this.$store.commit('setToken', res.data.result.token)
      alert('登录成功，跳转主页')
      this.$router.push('/layout')
      this.account = ''
      this.password = ''
    }
  }
}
</script>
<style lang="less">
.login_head {
  width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  height: 132px;
  align-items: center;
  img {
    width: 200px;
    height: 132px;
  }
  a {
    font-size: 22px;
  }
}
.login_content {
  height: 488px;
  background: url(http://erabbit.itheima.net/img/login-bg.696efec3.png);
  .login_container {
    width: 1240px;
    height: 488px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    .login_info {
      width: 380px;
      height: 400px;
      background: white;
      margin-top: 30px;
      .nav {
        display: flex;
        justify-content: space-around;
        line-height: 55px;
        border-bottom: 1px solid #e5e5e5;
        li {
          font-size: 20px;
          width: 40%;
          height: 55px;
          text-align: center;
          font-weight: bold;
          cursor: pointer;
          &.active {
            color: #27bb9a;
          }
        }
      }
    }
  }
}
.login_foot {
  width: 1240px;
  height: 160px;
  margin: 10px auto 30px;
}
.login_form {
  width: 380px;
  .useMessage {
    width: 380px;
    display: flex;
    justify-content: flex-end;
  }
  .form {
    width: 380px;

    div {
      display: flex;
      margin-top: 20px;

      i {
        width: 38px;
        height: 38px;
        background: #e5e5e5;
        text-align: center;
        line-height: 35px;
        margin-left: 30px;
      }
      input {
        width: 290px;
        height: 35px;
      }
      .veri {
        width: 200px;
      }
    }
  }
}
.deil {
  margin-left: 20px;
  .tips {
    color: red;
  }
}
.login_btn {
  width: 340px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: #27bb9a;
  color: white;
  margin-left: 20px;
  margin-top: 20px;
  cursor: pointer;
}
.qq {
  margin-top: 20px;
  margin-left: 20px;
  img {
    cursor: pointer;
  }
}
.code {
  text-align: center;
}
</style>
